<script lang="ts">
import {
    defineComponent,
    ref,
    watch,
    computed,
    nextTick,
    reactive,
    onMounted,
} from "vue";
import Clipboard from "clipboard";
import { showToast, showDialog, showConfirmDialog } from "vant";
import { useI18n } from "vue-i18n";
import { UserModule } from "@/store/modules/user";
import { formatAddress, toStringMatch } from "@/utils/format";
import {
    UserInfo,
    Count,
    GetNFTsInfo,
    Id2Address,
    GetNodeUSDT,
    GetNodeTRX,
    GetRewardUSDT,
    GetRewardTRX,
    GetReleaseReward,
    PayUSDT,
    PayTRX,
} from "@/contract/Node";
import { BalanceOf, Approve, Allowance } from "@/contract/Erc20";
import { TokenOfOwner, SafeTransferFrom } from "@/contract/NFT";
import { FormatDate } from "@/utils/formatDate";
import { getNodeCodeById, getNodeIdByCode } from "@/api";
import {
    getNFTcount,
    getTokenPrice,
    getUserInfo,
    getParameter,
    insertPreInvest,
    updatePreInvest,
    getNFTList,
    transfer,
} from "@/api/nodeapi";
import { USDT_TOKEN } from "@/contract/index";

import { useRouter } from "vue-router";

import { BigNumber } from "bignumber.js";
export default defineComponent({
    setup() {
        const { t } = useI18n();
        const router = useRouter();
        const referrer = ref();
        const active = ref(0);
        const active2 = ref(0);
        const amount = ref(1);
        const isCode = ref(false);
        const code = ref(router.currentRoute.value.query.referrer || "");
        const address2 = ref();
        const open = ref(false);
        const nftId = ref(0);
        const loading1 = ref(false);
        const loading2 = ref(false);
        const loading3 = ref(false);
        const loading4 = ref(false);
        const pageLoading = ref(true);
        const slippage = ref([5, 10, 20, 30, 40]);
        const slippageIndex = ref(5);
        const userInfo = ref({});
        const parameter = ref({});
        const NodeCode = ref();
        const nodeUSDTPrice = ref(0);
        const nodeTRX = ref(0);
        const nodeVTBK = ref(0);
        const USDT = ref(0);
        const TRX = ref(0);
        const count = ref(0);
        const setat = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0,
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list: any = ref([]);
        const onRefresh = () => {
            // setat.pageNum = 0;
            // finished.value = false;
            // loading.value = true;
            // refreshing.value = true;
            onLoad();
        };
        const onLoad = async () => {
            const res = await getNFTList({
                pageNum: setat.pageNum - 1,
                pageSize: setat.pageSize,
            });
            list.value = res.data.data.NFTList;
            setat.total = res.data.data.Total;
            // list.value = [
            //     {
            //         Id: 1,
            //         Reward: 100,
            //         CreatedAt: "2025-06-26",
            //     },
            //     {
            //         Id: 2,
            //         Reward: 100,
            //         CreatedAt: "2025-06-26",
            //     },
            //     {
            //         Id: 3,
            //         Reward: 100,
            //         CreatedAt: "2025-06-26",
            //     },
            // ];
        };
        const onSubmit = async ({ isloadData }) => {
            loading1.value = true;
            var preInvestId;
            try {
                await referrer.value.loadVerifyToken(true);
                if (isloadData) {
                    await loadData();
                }
                var payUSDT;
                var options2 = {
                    feeLimit: 100000000,
                    callValue: 0,
                };

                if (active.value == 0) {
                    if (USDT.value.lt(_nodeUSDT.value.toString())) {
                        showToast({
                            message: t("layout.InsufficientBalance"),
                            icon: "clear",
                            className: "_showToast2",
                            position: "top",
                        });
                        loading1.value = false;
                        return;
                    }
                    payUSDT = _nodeUSDT.value;
                } else {
                    if (USDT.value.lt(_nodeUSDT70.value.toString())) {
                        showToast({
                            message: t("layout.InsufficientBalance"),
                            icon: "clear",
                            className: "_showToast2",
                            position: "top",
                        });
                        loading1.value = false;
                        return;
                    }
                    if (
                        new BigNumber(toSun.value(userInfo.value.VTBK)).lt(
                            _nodeVTBK30.value.toString()
                        )
                    ) {
                        showToast({
                            message: t("layout.InsufficientBalance"),
                            icon: "clear",
                            className: "_showToast2",
                            position: "top",
                        });
                        loading1.value = false;
                        return;
                    }
                    payUSDT = _nodeUSDT70.value;
                }
                const parameters = [
                    {
                        type: "address",
                        value: parameter.value.PayReceiver,
                    },
                    {
                        type: "uint256",
                        value: Number(payUSDT),
                    },
                ];
                const transaction =
                    await tronWeb.transactionBuilder.triggerSmartContract(
                        USDT_TOKEN,
                        "transfer(address,uint256)",
                        options2,
                        parameters,
                        tronWeb.address.toHex(UserModule.userAddr)
                    );
                const insertPreInvestRes = await insertPreInvest({
                    address: parameter.value.PayReceiver,
                    tokenType: active.value,
                    token1Amount: fromSun.value(payUSDT),
                    amount: amount.value,
                    tx_hash: transaction.transaction.txID,
                    tx_timestamp: parseInt(
                        transaction.transaction.raw_data.timestamp / 1000
                    ),
                    tx_expiration: parseInt(
                        transaction.transaction.raw_data.expiration / 1000
                    ),
                });
                if (insertPreInvestRes.data.code == 20) {
                    preInvestId = insertPreInvestRes.data.data.PreInvestId;
                    const signedTransaction = await tronWeb.trx.sign(
                        transaction.transaction
                    );
                    const broadcast = await tronWeb.trx.sendRawTransaction(
                        signedTransaction
                    );
                    if (broadcast.result) {
                        setTimeout(() => {
                            loadData();
                            onRefresh();
                        }, 500);
                        open.value = false;
                        updatePreInvest({
                            preInvestId,
                            status: 2,
                        });
                        showToast({
                            message: t("layout.SuccessfulTransaction"),
                            icon: "checked",
                            className: "_showToast",
                            position: "top",
                        });
                    } else {
                        switch (broadcast.code) {
                            case "TRANSACTION_EXPIRATION_ERROR":
                                updatePreInvest({
                                    preInvestId,
                                    status: 1,
                                });
                                showToast({
                                    message: t("layout.TransactionExpiration"),
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                                break;
                            case "CONTRACT_VALIDATE_ERROR":
                                updatePreInvest({
                                    preInvestId,
                                    status: 1,
                                });
                                showToast({
                                    message: t("layout.InsufficientBalance"),
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                                break;

                            default:
                                showToast({
                                    message: t(
                                        "layout.TheOrderWasNotPlacedSuccessfullyPleaseTryAgain"
                                    ),
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                                break;
                        }
                    }
                } else {
                    showToast({
                        message: t(
                            "layout.TheOrderWasNotPlacedSuccessfullyPleaseTryAgain"
                        ),
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                }
            } catch (error) {
                if (preInvestId) {
                    updatePreInvest({
                        preInvestId,
                        status: 1,
                    });
                    showToast({
                        message: t("layout.TransactionCancelled"),
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                } else {
                    showToast({
                        message: t(
                            "layout.TheOrderWasNotPlacedSuccessfullyPleaseTryAgain"
                        ),
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                }
            }
            loading1.value = false;
        };
        const getRewardUSDT = async () => {};
        const getRewardTRX = async () => {};
        const getReleaseReward = async (item, index) => {};
        const safeTransferFrom = async () => {
            loading4.value = true;
            try {
                const res = await transfer({
                    address: address2.value,
                    tokenType: "3",
                    amount: nftId.value,
                });
                if (res.data.code == 20) {
                    setTimeout(() => {
                        loadData();
                        onRefresh();
                    }, 500);
                    open.value = false;
                } else {
                    showToast({
                        message: res.data.message,
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                }
            } catch (error) {
                console.log(error);
            }
            loading4.value = false;
        };
        const showOpen = (id) => {
            open.value = true;
            nftId.value = id;
        };
        const copy = async (id: string) => {
            const clipboard = new Clipboard(id);
            clipboard.on("success", () => {
                showToast({
                    message: t("layout.copySuccessfully"),
                    icon: "checked",
                    className: "_showToast",
                });
                clipboard.destroy();
            });
            clipboard.on("error", () => {
                showToast(t("layout.fail"));
                clipboard.destroy();
            });
        };
        const loadData = async () => {
            try {
                const _usdt = await BalanceOf(UserModule.userAddr);
                USDT.value = _usdt;
                const resInfo = await getUserInfo();
                userInfo.value = resInfo.data.data.UserInfo || {};
                await getPrice(amount.value);
                pageLoading.value = false;
            } catch (error) {}
        };
        const shareAddress = computed(() => {
            if (NodeCode.value) {
                return (
                    window.location.origin +
                    "/#/node?referrer=" +
                    NodeCode.value
                );
            }
            return "";
        });
        const fromSun = computed(() => {
            return (data) => {
                return tronWeb.fromSun(data);
            };
        });
        const toSun = computed(() => {
            return (data) => {
                return tronWeb.toSun(data);
            };
        });
        const getPrice = async (newValue) => {
            //  GetNodeUSDT(newValue).then((res) => {
            nodeUSDTPrice.value = toSun.value(500);
            // });
            getTokenPrice().then((res) => {
                nodeVTBK.value = res.data.data.PriceList[1].Price;
            });

            // await GetNodeTRX(newValue).then((res) => {
            //     nodeTRX.value = res;
            // });
        };
        // const _nodeTRX = computed(() => {
        //     if (nodeTRX.value) {
        //         return nodeTRX.value
        //             .mul(slippageIndex.value)
        //             .div(100)
        //             .add(nodeTRX.value)
        //             .mul(amount.value || 1);
        //     }
        //     return 0;
        // });
        const nodeUSDT = computed(() => {
            const data = new BigNumber(nodeUSDTPrice.value.toString());
            return data.plus(toSun.value(Math.floor(count.value / 100) / 2));
        });
        const _nodeUSDT = computed(() => {
            const data = new BigNumber(nodeUSDT.value.toString());
            return data.times(amount.value || 1);
        });
        const _nodeUSDT70 = computed(() => {
            return _nodeUSDT.value.times(parameter.value.USDTRate / 100);
        });
        const _nodeVTBK30 = computed(() => {
            return _nodeUSDT.value
                .times((100 - Number(parameter.value.USDTRate)) / 100)
                .dividedBy(nodeVTBK.value);
        });

        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                    onRefresh();
                }
            },
            { immediate: true }
        );
        watch(amount, (newValue, oldValue) => {
            if (newValue) {
                // getPrice(newValue);
            }
        });

        onMounted(() => {
            getParameter().then((res) => {
                parameter.value = res.data.data.Parameter;
            });
            getPrice(amount.value);
            getNFTcount().then((res) => {
                count.value = res.data.data.Count;
            });
        });

        return {
            referrer,
            active,
            active2,
            open,
            amount,
            isCode,
            code,
            address2,
            loading1,
            loading2,
            loading3,
            loading4,
            pageLoading,
            slippage,
            slippageIndex,
            UserModule,
            count,
            USDT,
            TRX,
            userInfo,
            parameter,
            NodeCode,
            nodeUSDT,
            _nodeUSDT,
            _nodeUSDT70,
            nodeTRX,
            nodeVTBK,
            _nodeVTBK30,
            fromSun,
            toSun,
            list,
            setat,
            refreshing,
            finished,
            onRefresh,
            onLoad,
            loading,
            toStringMatch,
            formatAddress,
            onSubmit,
            getRewardUSDT,
            getRewardTRX,
            showOpen,
            getReleaseReward,
            safeTransferFrom,
            copy,
            FormatDate,
            shareAddress,
        };
    },
});
</script>

<template>
    <div class="main2">
        <div class="page">
            <van-form @submit="onSubmit">
                <div class="rowNode">
                    <div class="num">
                        No. {{ Math.floor(count / 100) * 100 }} -
                        {{
                            Math.ceil(count / 100) * 100 ==
                            Math.floor(count / 100) * 100
                                ? Math.floor(count / 100) * 100 + 99
                                : Math.ceil(count / 100) * 100 - 1
                        }}
                    </div>
                    <div class="label">{{ $t("layout.Onsale") }}</div>
                </div>
                <div class="progress">
                    <div class="text">{{ $t("layout.text100") }}</div>
                    <van-progress :percentage="count % 100" color="#EB0029" />
                    <div class="value">
                        <span
                            >{{ $t("layout.Soldnodes") }} :
                            {{ count % 100 }}</span
                        >
                        <span>
                            {{ $t("layout.Currentbalance") }} :
                            {{
                                Math.ceil(count / 100) * 100 - count == 0
                                    ? 99
                                    : Math.ceil(count / 100) * 100 - count
                            }}</span
                        >
                    </div>
                </div>

                <div class="price">
                    {{ $t("layout.Currentprice") }} :
                    {{ fromSun(nodeUSDT) }} USD
                </div>
                <div class="rowinput">
                    <div class="name">{{ $t("layout.Quantity") }}</div>
                    <van-stepper
                        v-model="amount"
                        :max="
                            Math.ceil(count / 100) * 100 - count == 0
                                ? 99
                                : Math.ceil(count / 100) * 100 - count
                        "
                    />
                </div>

                <div class="rowinput" v-if="isCode">
                    <div class="name">{{ $t("layout.Invitationcode") }}</div>
                    <van-field
                        class="address"
                        v-model="code"
                        :placeholder="$t('layout.Pleaseenterinvitationcode')"
                    />
                </div>
                <div class="tabs">
                    <div class="name">{{ $t("layout.text101") }}</div>
                    <van-tabs v-model:active="active" class="tabsPay">
                        <van-tab title="USDT">
                            <div class="tabsBlock">
                                <div class="row">
                                    <div class="cell">
                                        <div class="label">
                                            {{ $t("layout.Paymentrequired") }}
                                        </div>
                                        <div class="value">
                                            <img
                                                src="@/assets/image/USDT.svg"
                                                alt=""
                                                srcset=""
                                            />
                                            {{
                                                toStringMatch(
                                                    fromSun(_nodeUSDT)
                                                )
                                            }}
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <div class="label">
                                            {{ $t("layout.Balance") }}
                                        </div>
                                        <div class="value">
                                            {{ toStringMatch(fromSun(USDT)) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-tab>
                        <van-tab
                            :title="`${parameter.USDTRate || 0}% USDT + ${
                                100 - Number(parameter.USDTRate) || 0
                            }% VTBK`"
                        >
                            <div class="tabsBlock">
                                <div class="row">
                                    <div class="cell cell2">
                                        <div class="label">
                                            {{
                                                $t("layout.Paymentrequired")
                                            }}（USDT/VTBK）
                                        </div>
                                        <div class="value">
                                            <span
                                                ><img
                                                    src="@/assets/image/USDT.svg"
                                                    alt=""
                                                    srcset=""
                                                />{{
                                                    toStringMatch(
                                                        fromSun(_nodeUSDT70)
                                                    )
                                                }}</span
                                            >
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="30"
                                                height="28"
                                                viewBox="0 0 30 28"
                                                fill="none"
                                            >
                                                <rect
                                                    y="12"
                                                    width="30"
                                                    height="4"
                                                    fill="black"
                                                />
                                                <rect
                                                    x="17"
                                                    width="28"
                                                    height="4"
                                                    transform="rotate(90 17 0)"
                                                    fill="black"
                                                />
                                            </svg>
                                            <span
                                                ><img
                                                    src="@/assets/logo3.png"
                                                    alt=""
                                                    srcset=""
                                                />
                                                {{
                                                    toStringMatch(
                                                        fromSun(_nodeVTBK30)
                                                    )
                                                }}</span
                                            >
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <div class="label">
                                            {{
                                                $t("layout.Balance")
                                            }}（USDT/VTBK）
                                        </div>
                                        <div class="value">
                                            {{ toStringMatch(fromSun(USDT)) }}
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="30"
                                                height="28"
                                                viewBox="0 0 30 28"
                                                fill="none"
                                            >
                                                <rect
                                                    y="12"
                                                    width="30"
                                                    height="4"
                                                    fill="black"
                                                />
                                                <rect
                                                    x="17"
                                                    width="28"
                                                    height="4"
                                                    transform="rotate(90 17 0)"
                                                    fill="black"
                                                />
                                            </svg>
                                            {{ toStringMatch(userInfo.VTBK) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-tab>
                    </van-tabs>
                </div>
                <van-button
                    round
                    block
                    type="primary"
                    :loading="loading1"
                    :disabled="pageLoading"
                    native-type="submit"
                >
                    {{ $t("layout.Buy") }}
                </van-button>
            </van-form>
            <div class="listTitle">{{ $t("layout.Mynodes") }}</div>
            <div class="list">
                <div class="head">
                    <span>{{ $t("layout.Nodes") }}</span>
                    <span>{{ $t("layout.Issued") }}</span>
                    <span>{{ $t("layout.Purchasetime") }}</span>
                    <span>{{ $t("layout.state") }}</span>
                </div>
                <ul>
                    <li v-for="(item, index) in list" :key="index">
                        <div>{{ item.Id }}</div>
                        <div>{{ item.Reward }}</div>
                        <div>{{ item.CreatedAt }}</div>
                        <div>
                            <van-button
                                round
                                block
                                type="primary"
                                @click="showOpen(item.Id)"
                            >
                                {{ $t("layout.Transfer") }}
                            </van-button>
                        </div>
                    </li>
                </ul>
                <div class="pagination">
                    <van-pagination
                        v-model="setat.pageNum"
                        :total-items="setat.total"
                        :show-page-size="3"
                        :items-per-page="setat.pageSize"
                        force-ellipses
                        @change="onRefresh"
                    >
                        <template #prev-text>
                            <van-icon name="arrow-left" />
                        </template>
                        <template #next-text>
                            <van-icon name="arrow" />
                        </template>
                    </van-pagination>
                </div>
            </div>
        </div>
    </div>
    <van-popup
        v-model:show="open"
        :duration="0.2"
        close-icon-position="top-right"
        closeable
        round
        :style="{
            background: `rgba(11, 15, 36, 1)`,
        }"
    >
        <div class="popup">
            <div class="name">{{ $t("layout.Transfer") }}</div>
            <van-field
                v-model="address2"
                :placeholder="$t('layout.Pleaseenterrecipientaddress')"
            />
            <van-button
                round
                block
                type="primary"
                @click="safeTransferFrom"
                :loading="loading4"
            >
                {{ $t("layout.Confirm") }}
            </van-button>
        </div>
    </van-popup>
    <referrer-2
        ref="referrer"
        @load="loading1 = false"
        @cross="loading1 = false"
    />
</template>

<style lang="less" scoped>
.popovertext {
    padding: 10px;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
}

.page {
    .van-form {
        padding: 24px;
        border-radius: 20px;
        border: 1px solid #d9d9d9;
        .rowNode {
            display: flex;
            justify-content: space-between;
            .num {
                font-size: 32px;
                font-weight: 700;
                line-height: 44px; /* 137.5% */
            }
            .label {
                padding: 6px 16px;
                color: #eb0029;
                font-size: 20px;
                font-weight: 400;
                display: inline-flex;
                padding: 6px 16px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border-radius: 20px;
                border: 1px solid #eb0029;
                background: #fff7f7;
            }
        }
        .progress {
            margin-top: 40px;
            .text {
                color: #000;
                font-size: 20px;
                font-weight: 700;
            }
            .van-progress {
                margin-top: 16px;
                height: 12px;
                flex-shrink: 0;
                background: #ffccd5;
                &:deep(.van-progress__pivot) {
                    display: none;
                }
            }
            .value {
                margin-top: 16px;
                text-align: right;
                font-size: 20px;
                span {
                    margin-left: 32px;
                }
            }
        }
        .price {
            padding: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 40px;
            border-radius: 10px;
            border: 1px solid #ffccd5;
            background: #fff7f7;
            color: #eb0029;
            font-size: 24px;
            font-weight: 900;
        }
        .name {
            margin-bottom: 20px;
            font-weight: 700;
            font-size: 20px;
        }
        .rowinput {
            margin-top: 40px;

            .van-stepper {
                position: relative;
                display: flex;
                height: auto;
                overflow: hidden;
                &:deep(input) {
                    width: auto;
                    flex: 1 0 0;
                    height: 60px;
                    font-size: 16px;
                    text-align: left;
                    text-indent: 20px;
                    background: transparent;
                    border-radius: 10px;
                    border: 1px solid #d9d9d9;
                    box-sizing: content-box;
                    &:focus {
                        border: 1px solid #eb0029;
                        background: #fff7f7;
                    }
                }
                &:deep(.van-stepper__minus) {
                    display: none;
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    margin: 1px 2px;
                    width: 51px;
                    height: 52px;
                    background: rgba(11, 15, 36, 1);
                    border-radius: 8px;
                    &::before,
                    &::after {
                        width: 40%;
                        background-color: #fff;
                    }
                }
                &:deep(.van-stepper__plus) {
                    display: none;
                    position: absolute;
                    right: 1px;
                    top: 1px;
                    margin: 1px 2px;
                    width: 51px;
                    height: 52px;
                    background: rgba(11, 15, 36, 1);
                    border-radius: 8px;
                    &::before,
                    &::after {
                        background-color: #fff;
                    }
                    &::before {
                        width: 40%;
                    }
                    &::after {
                        height: 40%;
                    }
                }
            }
            .van-field {
                height: auto;
                padding: 0;
                background: transparent;
                &:deep(input) {
                    height: 60px;
                    padding: 0 20px;
                    font-size: 16px;
                    border-radius: 10px;
                    border: 1px solid #d9d9d9;
                    box-sizing: content-box;
                    &:focus {
                        border: 1px solid #eb0029;
                        background: #fff7f7;
                    }
                }
            }
        }
        .tabs {
            margin-top: 40px;
        }
        .tabsPay {
            &:deep(.van-tabs__wrap) {
                height: 60px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 8px;
                overflow: hidden;
                .van-tabs__nav {
                    background: transparent;
                    gap: 20px;
                }
                .van-tab {
                    color: #000;
                    font-size: 20px;
                    border-radius: 10px;
                    border: 1px solid #d9d9d9;
                    &.van-tab--active {
                        color: #eb0029;
                        border: 1px solid #eb0029;
                    }
                }
                .van-tabs__line {
                    display: none;
                }
            }
            .tabsBlock {
                margin-top: 20px;
                .row {
                    display: flex;
                    justify-content: space-between;
                    & > :last-child {
                        .value {
                            display: flex;
                            justify-content: flex-end;
                            text-align: right;
                            color: #eb0029;
                        }
                    }
                    .label {
                        font-weight: 400;
                        font-size: 20px;
                    }
                    .cell2 {
                        flex: 1;
                    }
                    .value {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        margin-top: 5px;
                        color: #000;
                        font-size: 36px;
                        font-weight: 900;
                        span {
                            display: flex;
                            align-items: center;
                        }
                        svg {
                            margin: 0 24px;
                        }
                        img {
                            margin: 0 8px 0 0;
                            width: 50px;
                            height: 50px;
                            flex-shrink: 0;
                        }
                    }
                }
            }
        }
        .van-button {
            margin-top: 40px;
        }
    }

    .listTitle {
        margin-top: 72px;
        color: #000;
        font-size: 20px;
        font-weight: 700;
    }
    .list {
        margin-top: 22px;
        border-radius: 20px;
        border: 1px solid #d9d9d9;
        overflow: hidden;
        background: #fff;
        .head {
            padding: 25px 0;
            display: flex;
            background: #f8f8f8;
            text-align: center;
            span {
                flex: 1;
                color: #000;
                font-size: 16px;
                font-weight: 700;
            }
        }
        ul {
            li {
                padding: 22px 0;
                display: flex;
                text-align: center;
                border-bottom: 1px solid #d9d9d9;
                div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    color: #000;
                    font-size: 16px;
                    font-weight: 400;
                    .van-button {
                        width: auto;
                        height: auto;
                        padding: 4px 32px;
                        color: #eb0029;
                        font-size: 16px;
                        font-weight: 900;
                        border-radius: 10px;
                        background: transparent;
                        border: 1px solid #eb0029;
                    }
                }
            }
        }
        .pagination {
            padding-top: 50px;
            text-align: right;
            padding-right: 10px;
            .van-pagination {
                display: inline-block;
            }
        }
    }
    @media (max-width: 1000px) {
        & {
            .van-form {
                padding: 16px;
                .rowNode {
                    align-items: center;
                    .num {
                        font-size: 20px;
                        line-height: 44px; /* 137.5% */
                    }
                    .label {
                        padding: 8px 16px;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 1;
                    }
                }
                .progress {
                    margin-top: 37px;
                    .text {
                        font-size: 16px;
                    }
                    .van-progress {
                        margin-top: 12px;
                    }
                    .value {
                        margin-top: 12px;
                        text-align: left;
                        font-size: 16px;
                        span {
                            margin: 0 16px 0 0;
                        }
                    }
                }
                .price {
                    margin-top: 32px;
                    padding: 16px 0;
                    font-size: 20px;
                }
                .name {
                    margin-bottom: 12px;
                    font-size: 16px;
                }
                .rowinput {
                    margin-top: 32px;
                    .van-stepper {
                    }
                    .van-field {
                        &:deep(input) {
                            font-size: 14px;
                        }
                    }
                }
                .tabsPay {
                    &:deep(.van-tabs__wrap) {
                        height: 48px;
                        .van-tabs__nav {
                            gap: 10px;
                        }
                        .van-tab {
                            font-size: 16px;
                            .van-tab__text--ellipsis {
                                display: inline;
                                letter-spacing: -1.3px;
                            }
                        }
                    }
                    .tabsBlock {
                        margin-top: 20px;
                        .row {
                            display: block;
                            text-align: center;
                            .cell {
                                display: block;
                            }
                            & > :last-child {
                                margin-top: 28px;
                                .value {
                                    justify-content: center;
                                }
                            }
                            .label {
                                margin-right: 8px;
                                font-size: 16px;
                            }
                            .cell2 {
                                flex: none;
                                align-items: center;
                                text-align: center;
                            }
                            .value {
                                justify-content: center;
                                margin-top: 9.5px;
                                flex: none;
                                color: #000;
                                font-size: 16px;
                                span {
                                    display: flex;
                                    align-items: center;
                                }
                                svg {
                                    margin: 0 5px;
                                    width: 15px;
                                    height: 15px;
                                }
                                img {
                                    width: 24px;
                                    height: 24px;
                                }
                            }
                        }
                    }
                }
                .van-button {
                    margin-top: 40px;
                }
            }
            .listTitle {
                margin-top: 60px;
                font-size: 16px;
            }
            .list {
                .head {
                    padding: 20px 0;
                    span {
                        font-size: 14px;
                        font-weight: 700;
                    }
                }
                ul {
                    li {
                        padding: 15px 0;
                        div {
                            font-size: 12px;
                            .van-button {
                                width: auto;
                                height: auto;
                                padding: 4px 10px;
                            }
                        }
                    }
                }
                .pagination {
                }
            }
        }
    }
}

.popup {
    width: 449px;
    padding: 32px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 15px;
    .name {
        color: #000;
        font-size: 24px;
        font-weight: 600;
        line-height: 160%; /* 38.4px */
    }
    .van-field {
        margin-top: 30px;
        height: 46px;
        padding: 0 15px;
        border-radius: 8px;
        border: 1px #d9d9d9 solid;
        &:deep(input) {
            height: 46px;
            font-size: 16px;
            color: #000;
        }
        &::after {
            display: none;
        }
    }
    .van-button {
        margin-top: 30px;
    }
    @media (max-width: 680px) {
        & {
            width: 90vw;
        }
    }
}
</style>
